<template>
  <div class="echart_status"></div>
</template>

<script lang="ts" setup>
import { inject, nextTick, onMounted } from "vue";
import { debounce } from "@/util/debounce";
let echarts: any = inject("echarts");
let echart: any;
let option: any;
onMounted(() => {
  nextTick(() => {
    initEcharts();
  });
});
function initEcharts() {
  let dom: any = document.querySelector(".echart_status");
  echart = echarts.init(dom, {
    width: dom.width + "px",
    height: dom.height + "px",
  });
  option = {
    baseOption: {
      timeline: {
        axisType: "category",
        // realtime: false,
        // loop: false,
        autoPlay: true,
        currentIndex: 0,
        playInterval: 1000,
        // controlStyle: {
        //     position: 'left'
        // },
        data: [
          "2002-01-01",
          // '2003-01-01',
          "2004-01-01",
          // {
          //   value: "2005-01-01",
          //   tooltip: {
          //     formatter: "{b} GDP达到一个高度",
          //   },
          //   symbol: "diamond",
          //   symbolSize: 16,
          // },
          // "2006-01-01",
          // "2007-01-01",
          // "2008-01-01",
          // "2009-01-01",
          // "2010-01-01",
          // {
          //   value: "2011-01-01",
          //   tooltip: {
          //     formatter: function (params:any) {
          //       return params.name + "GDP达到又一个高度";
          //     },
          //   },
          //   symbol: "diamond",
          //   symbolSize: 18,
          // },
        ],
        label: {
          formatter: function (s: any) {
            return new Date(s).getFullYear();
          },
        },
      },
      title: {
        subtext: "数据来自国家统计局",
      },
      tooltip: {},
      legend: {},
      calculable: true,
      grid: {
        top: 80,
        bottom: 100,
      },
      xAxis: [
        {
          type: "category",
          axisLabel: { interval: 0 },
          data: ["09:00:00", "10:00:00", "11:00:00"],
          splitLine: { show: false },
        },
      ],
      yAxis: [
        {
          type: "value",
          name: "GDP（亿元）",
          max: 100,
        },
      ],
      series: [{ name: "GDP", type: "bar" }],
    },
    options: [
      {
        title: { text: "2002全国宏观经济指标" },
        series: [{ data: [20, 30, 40] }],
      },
      {
        title: { text: "2003全国宏观经济指标" },
        series: [{ data: [50, 60, 90] }],
      },
    ],
  };
  option && echart.setOption(option);
  window.onresize = debounce(
    function () {
      nextTick(() => {
        echart.resize();
      });
    },
    100,
    true
  );
}
</script>

<style lang="scss" scoped>
.echart_status {
  height: 100%;
  width: 100%;
  // background-color: red;
}
</style>
